<template>
  <div style="margin: 10px">

    <h1>编辑规则信息:</h1>
    <div>
      <el-row :gutter="15">
        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">


          <el-col :span="12">
            <el-form-item label="规则名称" prop="ruleName">
              <el-input v-model="formData.ruleName" placeholder="请输入规则名称" :maxlength="11" show-word-limit
                        :disabled="disabled"
                        clearable :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>


          <el-col :span="12">
            <el-form-item label="收费类型" prop="chtrid">
              <el-select v-model="formData.chtrid" placeholder="请选择" :disabled="disabled" clearable
                         :style="{width: '100%'}"
                         >
                <el-option
                  v-for="item in this.rulestypesList"
                  :key="item.chtrid"
                  :label="item.tollRulesName"
                  :value="item.chtrid">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="车牌颜色" prop="lpcid">
              <el-select v-model="formData.lpcid" placeholder="请选择" :disabled="disabled" clearable
                         :style="{width: '100%'}">
                <el-option
                  v-for="item in this.colorsList"
                  :key="item.lpcid"
                  :label="item.carsPlateName"
                  :value="item.lpcid">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>


          <el-col :span="12">
            <el-form-item label="车辆类型" prop="carsTypeid">
              <el-select v-model="formData.carsTypeid" placeholder="请选择" :disabled="disabled" clearable
                         :style="{width: '50%'}">
                <el-option
                  v-for="item in this.carsTypeList"
                  :key="item.carsType.ctid"
                  :label="item.carsType.typeName"
                  :value="item.carsType.ctid">
                </el-option>
              </el-select>
              <el-button type="primary" @click="$router.push({name: 'addcarsType',query:{chid:$route.query.chid}})">添加车辆类型</el-button>
            </el-form-item>

          </el-col>


          <el-col :span="12">
            <el-form-item label="节假日" prop="holidaysFree">
              <el-select v-model="formData.holidaysFree" placeholder="请选择节假日" :disabled="disabled" clearable
                         :style="{width: '100%'}">
                <el-option v-for="(item, index) in holidaysFreeOptions" :key="index" :label="item.label"
                           :value="item.value" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
          </el-col>


        </el-form>
      </el-row>
    </div>
    <div style="margin: 10px">
      <h1>收费规则详情:</h1>
    </div>

    <div style="margin: 10px">
      <el-collapse>
        <el-collapse-item title="按次收费规则说明:" v-if="this.formData.chtrid==1">
          <ul>
            <li>车辆每次出场需要缴纳固定金额费用，没有时间限制，按进出次数收取费用</li>
          </ul>
        </el-collapse-item>

        <el-collapse-item title="按分钟收费规则说明:" v-if="this.formData.chtrid==2">
          <ul>
            <li>
              友情提示：进场时间表示在停车场中入场和出场这个时间段
            </li>
            <li>免收分钟： 例：设置免收时间为5分钟，表示在进场5分钟之内，不收取任何的费用</li>
            <li>起步分钟：
              例：免收时间5分钟，起步分钟10分钟，起步金额5元。表示在进场时间大于5分钟，小于等于10分钟，只收起步金额5元
            </li>
            <li>每超(X)分钟，收费金额(Y)元 例：免收时间5分钟，起步分钟10分钟，起步金额5元，每超5分钟，收费3元。
              表示在进场5分钟之内不收取任何费用，大于5分钟，小于等于10分钟，只收起步金额5元，
              每超5分钟收费3元，在起步分钟的基础上进行金额的累加，比如12分钟，收费8元，15分钟收费8元，16分钟则收费11元
            </li>
            <li>每天最高金额 单次停车最高收费金额。 例：</li>

          </ul>
        </el-collapse-item>
        <el-collapse-item title="按天收费规则说明:" v-if="this.formData.chtrid==3">
          <ul>
            <li> 友情提示：进场时间表示在停车场中入场和出场这个时间段</li>
            <li>免收时长： 例：设置免收时间为5分钟，表示在进场5分钟之内，不收取任何的费用</li>
            <li>每天收费；</li>
          </ul>
        </el-collapse-item>

      </el-collapse>
    </div>


    <div style="height: 300px; width: 1420px;border: rgba(0,0,0,0.04) solid 2px;margin: 10px;">

      <div>
        <div style="padding: 20px;">
          <el-form :model="formData1" ref="form" v-if="this.formData.chtrid==1">
            <el-form-item label-width="300px" label="每次收费金额" prop="amount">
              <el-input-number v-model="formData1.amount" placeholder="请输入每次收费金额" controls-position="right"
                               :disabled="disabled"></el-input-number>
            </el-form-item>
          </el-form>


          <el-form :model="formData2" size="medium" label-width="100px" v-if="this.formData.chtrid==2">
            <el-col :span="24">
              <el-form-item label="免收分钟" prop="freeMinute">
                <el-input v-model="formData2.freeMinute" placeholder="请输入免收分钟" :maxlength="11" show-word-limit
                          :disabled="disabled"
                          clearable :style="{width: '100%'}">
                  <template slot="append">分钟</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="起步分钟" prop="beginMinute">
                <el-input v-model="formData2.beginMinute" placeholder="请输入起步分钟" :disabled="disabled" clearable
                          :style="{width: '100%'}">
                  <template slot="append">分钟</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="起步价格" prop="beginMoney">
                <el-input v-model="formData2.beginMoney" placeholder="请输入起步价格" :disabled="disabled" clearable
                          :style="{width: '100%'}">
                  <template slot="append">元</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="每超" prop="thanMinute">
                <el-input v-model="formData2.thanMinute" clearable :style="{width: '100%'}" :disabled="disabled">
                  <template slot="append">分钟</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="收费金额" prop="getMoney">
                <el-input v-model="formData2.getMoney" placeholder="请输入收费金额" :disabled="disabled" clearable
                          :style="{width: '100%'}">
                  <template slot="append">元</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label-width="127px" label="每日最高金额" prop="maxMoney">
                <el-input v-model="formData2.maxMoney" placeholder="请输入每日最高金额" :disabled="disabled" clearable
                          :style="{width: '100%'}">
                  <template slot="append">元</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-form>


          <el-form :model="formData3" size="medium" label-width="100px" v-if="this.formData.chtrid==3">
            <el-col :span="12">
              <el-form-item label="免收时长" prop="freeMinute">
                <el-input v-model="formData3.freeMinute" placeholder="请输入免收时长" :maxlength="11"
                          :disabled="disabled" show-word-limit
                          clearable :style="{width: '100%'}">
                  <template slot="append">分钟</template>
                </el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="每天收费" prop="dayMoney">
                <el-input v-model="formData3.dayMoney" placeholder="请输入每天收费" :disabled="disabled" clearable
                          :style="{width: '100%'}">
                  <template slot="append">元</template>
                </el-input>
              </el-form-item>
            </el-col>


          </el-form>
        </div>


        <div style="margin-left: 320px">
          <el-button type="primary" @click="submitForm">新增</el-button>
          <el-button @click="goback">返回</el-button>
        </div>


      </div>

    </div>
  </div>
</template>
<script>
import {listRulestype} from "@/api/modules/sys-cars-home/carshomerules/rulestypes";
import {listColors} from "@/api/modules/sys-cars-home/carshomerules/colors";
import {listCt} from "@/api/info/ct";
import {addRules, getRules, listRules, updateRules} from "@/api/modules/sys-cars-home/carshomerules/rules";
import {v4 as uuidv4} from 'uuid';
import {addTime, listTime, updateTime} from "@/api/modules/sys-cars-home/api/time";
import {addMinute, listMinute, updateMinute} from "@/api/modules/sys-cars-home/api/minute";
import {addDay, listDay, updateDay} from "@/api/modules/sys-cars-home/api/day";

export default {
  components: {},
  props: [],
  data() {
    return {

      // 车场计费规则类型表格数据
      rulestypesList: [],
      // 车辆牌照颜色表格数据
      colorsList: [],
      //车型
      carsTypeList: [],
      formct: {
        chid: null
      },
      formData: {

        ruleName: '',
        chtrid: null,
        carsTypeid: undefined,
        lpcid: undefined,
        holidaysFree: 0,
        chid: undefined,
        rulesTxt: undefined,
      },
      formData1: {
        timeid:null,
        amount: 0,
        code: null
      },

      formData2: {
        // minuteid:null,
        freeMinute: 0,
        beginMinute: 0,
        beginMoney: 0,
        thanMinute: 0,
        getMoney: 0,
        maxMoney: 0,
        code: null
      },

      formData3: {
        dayid:null,
        freeMinute: 0,
        dayMoney: 0,
        code: null
      },

      query: {
        code: null
      },



      disabled: false,
      code: null,
      rules: {
        ruleName: [{
          required: true,
          message: '请输入规则名称',
          trigger: 'blur'
        }],
        chtrid: [{
          required: true,
          message: '请输入收费类型',
          trigger: 'blur'
        }],
        field102: [{
          required: true,
          message: '请选择',
          trigger: 'change'
        }],
        lpcid: [{
          required: true,
          message: '请输入车牌颜色',
          trigger: 'blur'
        }],
        holidaysFree: [{
          required: true,
          message: '请选择节假日',
          trigger: 'change'
        }],
      },


      field102Options: [{
        "label": "选项一",
        "value": 1
      }, {
        "label": "选项二",
        "value": 2
      }],
      holidaysFreeOptions: [{
        "label": "收费",
        "value": 0
      }, {
        "label": "免费",
        "value": 1
      }],
    }
  },
  computed: {},
  watch: {},
  created() {


    this.getRulesType()
    this.getCarsColors()
    this.getCarsTypeList()
    this.listen()

  },
  mounted() {
  },
  methods: {
    listen() {
      if (this.$route.query.message == "新增") {
        this.disabled = false
        this.formData.chtrid=1
      } else if (this.$route.query.message == "修改") {
        this.disabled = false
        this.formData.chtrid=this.$route.query.chtrid
        this.getMessage()
      } else if (this.$route.query.message == "查看") {
        this.disabled = true
        this.formData.chtrid=this.$route.query.chtrid
        //渲染表单数据
        this.getMessage()

      }
    },

    getMessage() {
      getRules(parseInt(this.$route.query.chrid)).then(res => {
        this.formData.ruleName = res.data.ruleName
        this.formData.chtrid = res.data.chtrid
        this.formData.carsTypeid = res.data.carsTypeid
        this.formData.holidaysFree = res.data.holidaysFree
        this.formData.lpcid = res.data.lpcid
      })
      this.query.code = this.$route.query.rulesTxt
      if (this.$route.query.chtrid == 1) {
        listTime(this.query).then(res => {

          this.formData1 = res.rows[0]
          console.log(this.formData1)
        })
      } else if (this.$route.query.chtrid == 2) {
        listMinute(this.query).then(res => {
          this.formData2 = res.rows[0]
        })
      } else if (this.$route.query.chtrid == 3) {
        listDay(this.query).then(res => {
          this.formData3 = res.rows[0]
        })
      }
    },

    /** 查询车场收费规则类型列表 */
    getRulesType() {
      listRulestype(null).then(response => {
        this.rulestypesList = response.rows;
      });
    },
    /** 查询车牌颜色类型列表 */
    getCarsColors() {
      listColors(this.carsColorsParams).then(response => {
        this.colorsList = response.rows;
      });
    },
    //获取车型
    getCarsTypeList() {
      this.formct.chid = this.$route.query.chid
      listCt(this.formct).then(res => {
        this.carsTypeList = res.rows
      })
    },



    esit() {
      this.showPricePerEntry = false
      this.showMinuteBasedPrice = false
      this.showDailyBasedPrice = false
    },

//提交
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (valid) {

          if (this.$route.query.message == "新增") {
            this.formData.rulesTxt = uuidv4();
            this.formData.chid = this.$route.query.chid
            //添加按次成功
            addRules(this.formData).then(res => {
              if (this.formData.chtrid == 1) {
                this.formData1.code = this.formData.rulesTxt
                addTime(this.formData1).then(response => {
                  this.$modal.msgSuccess("添加按次成功!");
                  this.goback();
                })
              } else if (this.formData.chtrid == 2) {
                //添加按分钟成功
                this.formData2.code = this.formData.rulesTxt
                addMinute(this.formData2).then(response => {
                  this.$modal.msgSuccess("添加按分钟成功!");
                  this.goback();
                })
              } else if (this.formData.chtrid == 3) {
                //添加按天成功
                this.formData3.code = this.formData.rulesTxt
                addDay(this.formData3).then(response => {
                  this.$modal.msgSuccess("添加按天成功!");
                  this.goback();
                })
              }
            })
          } else if (this.$route.query.message == "修改") {
            //修改按次成功
            updateRules(this.formData).then(res => {
              if (this.formData.chtrid == 1) {
                console.log(this.formData1)
                updateTime(this.formData1).then(response => {
                  this.$modal.msgSuccess("修改按次成功!");
                  this.goback();
                })
              } else if (this.formData.chtrid == 2) {
                //添加按分钟成功
                updateMinute(this.formData2).then(response => {
                  this.$modal.msgSuccess("修改按分钟成功!");
                  this.goback();
                })
              } else if (this.formData.chtrid == 3) {
                //添加按天成功
                updateDay(this.formData3).then(response => {
                  this.$modal.msgSuccess("修改按天成功!");
                  this.goback();
                })
              }
            })
          }

        } else {
          return
        }

      })
    },

    //返回
    goback() {
      this.$refs['elForm'].resetFields()
      this.$store.dispatch('tagsView/delAllViews', this.$router);
      this.$router.push({
        path: "carshomerule", query: {
          chid: this.$route.query.chid,
          chname: this.$route.query.chname
        }
      })
    },

  }
}

</script>
<style>

.button-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 150%; /* 根据需要调整高度 */
}
</style>
